<template>
    <div class="login-bac">
        <div class="mar"></div>
        <div class="login-box">
            <div class="box-left">
                <div class="mar"></div>
                <div class="welcome">
                    <img :src="wel" style="width: 24px;height: 24px;">
                    <p style="font-size: 24px;">{{ $t('login.welcome') }}</p>
                    <p>{{ $t('login.tips') }}</p>
                </div>
                <div class="login">
                    <t-form :data="account" labelAlign="top" ref="ruleFormRef" :rules="rules" @submit="login" :requiredMark="false">
                        <t-form-item label="" name="userName">
                            <t-input v-model="account.userName" @change="userNameInput" clearable :placeholder="$t('login.input.account')">
                                <template #prefix-icon>
                                    <desktop-icon />
                                </template>
                            </t-input>
                        </t-form-item>
                        <t-form-item label=""  name="password">
                            <t-input v-model="account.password" @change="passwordInput" type="password" clearable :placeholder="$t('login.input.password')">
                                <template #prefix-icon>
                                    <lock-on-icon />
                                </template>
                            </t-input>
                        </t-form-item>
                        <div style="display: flex;justify-content: space-between;height: 32px;line-height: 32px;">
                            <p>
                                <el-checkbox size="small" v-model="remember"
                                    :label="$t('login.remember')"></el-checkbox>
                            </p>
                            <p class="forgot">{{ $t('login.forget') }}</p>
                        </div>
                            <t-form-item>
                                <t-button theme="primary" type="submit" block class="login-button">{{ $t('login.signIn') }}</t-button>
                            </t-form-item>
                        
                    </t-form>
                   
                </div>
            </div>
            <div class="bac">
                <img :src="bg" alt="">
            </div>
        </div>
    </div>
</template>


<script setup>
import bg from '@/assets/img/bg.png'
import wel from '@/assets/img/home.png'
import { MessagePlugin } from 'tdesign-vue-next';
import { DesktopIcon, LockOnIcon } from 'tdesign-icons-vue-next';
import { ref, reactive } from 'vue'
import inputHelp from '@/utils/inputHelp'
import api from './api'
import { useRouter } from 'vue-router'
const router = useRouter()
import { useAsiderStore } from '@/stores/asider';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const remember = ref(Boolean(localStorage.getItem('remember')) || false)
const asiderStore = useAsiderStore()
//表单校验
const ruleFormRef = ref(null)
const rules = {
    userName: [
        { required: true, message: t('login.required.account'), trigger: 'blur' },
        // { pattern: /^[a-zA-Z0-9@.]+$/, message: '请输入字母、数字和@', trigger: 'blur' },
    ], password: [
        { required: true, message: t('login.required.password'), trigger: 'blur' },
    ]
}





const userNameInput = (value)=>{
    account.userName = inputHelp.isAccount(value)
}
const passwordInput = (value)=>{
    account.password = inputHelp.isAccount(value)
}

const account = reactive({
    userName: 'admin',
    password: '123456'
})

const login = async ({ validateResult, firstError }) => {
    if (validateResult === true) {
    api.login(account).then(res=>{
        if(res.successed){
            localStorage.setItem('token', res.token)
            MessagePlugin.success({content:res.message,duration:1500,onClose:()=>{
                console.log(asiderStore.activeIndex)
                router.push(asiderStore.activeIndex)
            }})
            
        }else{
            MessagePlugin.warning(res.message);
        }
    })
  } else {
    console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }

}



</script>



<style lang="scss">
.login-bac {
    padding: 89.5px 0;
    background: linear-gradient(#f9fafc, #e3ebf6);

    .login-box {
        width: 70vw;
        height: 700px;
        background-color: white;
        border-radius: 80px;
        margin: auto;
        padding: 20px;
        display: flex;
        justify-content: space-between;

        .box-left {
            height: 100%;
            width: 48%;

            .mar {
                height: 160px;
            }

            .welcome {
                height: 140px;
                width: 300px;
                margin: auto;
                text-align: center;

            }

            .login {
                width: 240px;
                height: 300px;
                margin: auto;

                .forgot {
                    font-size: 12px;
                    color: #a1a1a1;
                    text-align: right;
                }

                .forgot:hover {
                    cursor: pointer;
                    color: #1b31ba
                }

                .login-button {
                    margin: 30px auto;
                    width: 240px;
                    border-radius: 23px;
                    background-color: #122db0;
                    color: white;
                }

                .third-party {
                    width: 160px;
                    display: flex;
                    justify-content: space-between;
                    margin: auto;

                    .icon:hover {
                        cursor: pointer;
                    }
                }
            }
        }

        .bac {
            height: 100%;
            width: 48%;
            border-radius: 80px;
            overflow: hidden;
        }
    }


    .el-input__wrapper {
        border-radius: 23px;
    }
}

@media screen and (max-width: 380px) {
    .login-bac {
        padding: 0;
        height: 100vh;

        .mar {
            height: 60px;
        }

        .login-box {
            width: 253px;
            height: 500px;

            .box-left {
                width: 253px;

                .mar {
                    height: 60px;
                }

                .login {
                    height: 200px;
                }

                .welcome {
                    width: 253px;
                }
            }

            .bac {
                height: 0;
            }

        }
    }

}
</style>